import React, { Component } from 'react';
import { connect } from 'dva';
import { Tabs } from 'antd';
import { Dispatch, AnyAction } from 'redux';
import styles from './index.css';
import { Info, Device } from './components';
import { ConnectState, Statistics } from '@/models/connect';
import { isMenuVisible } from '@/utils/utils';
const { TabPane } = Tabs;

interface DeviceProps {
  dispatch: Dispatch<AnyAction>;
  defaultTabsActiveKey?: Statistics;
  loading?: boolean;
}
// @connect()
@connect(({ loading, statistics }: ConnectState) => ({
  loading: loading.effects['statistics/defaultTabsActiveKey'],
  defaultTabsActiveKey: statistics.defaultTabsActiveKey,
}))
class statics extends Component<DeviceProps> {
  constructor(props: DeviceProps) {
    super(props);
    const { defaultTabsActiveKey = {} } = this.props;
    let aaa = defaultTabsActiveKey.defaultActiveKey + '';
    this.state = {
      title: '统计报表',
      defaultTabsActiveKey: aaa,
      tabArr: [
        { idx: '0', menuId: 'iot:logInfoStatistical:view', type: 'device/login1' },
        { idx: '1', menuId: 'iot:logDeviceStatistical:view', type: 'device/initDeviceManger' },
        // { idx: '2', menuId: '8', type: 'deviceWarn/deviceWarnedList' },
      ],
      activeTabArr: [],
      activeIdx: '0',
      activeTab: '',
    };
  }
  componentWillMount() {
    let arr = [];
    this.state.tabArr.forEach((e: any) => {
      if (isMenuVisible(e.menuId)) {
        arr.push(e);
      }
    });
    this.setState({ activeTabArr: arr }, () => {
      this.setState({
        activeIdx:
          this.props.defaultTabsActiveKey.defaultActiveKey + ''
            ? this.props.defaultTabsActiveKey.defaultActiveKey + ''
            : this.state.activeTabArr.length && this.state.activeTabArr[0].idx,
      });
    });
  }
  handleTabChange = (type: string) => {
    // console.log(type);
    this.setState({
      activeIdx: type,
    });
    // this.setState({ title: type === 'device/login1' ? '信息统计' : '设备统计' });
    const { dispatch } = this.props;
    dispatch({ type });
  };
  tabClickHandler = (params: any) => {
    this.setState(
      {
        defaultTabsActiveKey: params,
      },
      () => {
        const { dispatch } = this.props;
        dispatch({
          type: 'statistics/defaultTabsActiveKey',
          payload: { defaultActiveKey: this.state.defaultTabsActiveKey },
        });
      },
    );
  };
  render() {
    return (
      <div className={styles.container}>
        <Tabs
          activeKey={''+this.state.activeIdx}
          onTabClick={params => this.tabClickHandler(params)}
          onChange={this.handleTabChange}
          className="statistics"
          type="card"
        >
          {isMenuVisible('iot:logInfoStatistical:view') && (
            <TabPane tab="信息统计" key="0">
              <Info />
            </TabPane>
          )}
          {isMenuVisible('iot:logDeviceStatistical:view') && (
            <TabPane tab="设备统计" key="1">
              <Device />
            </TabPane>
          )}
        </Tabs>
      </div>
    );
  }
}
export default statics;
